<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue监视数据变化的原理</title>
</head>
<body>
  <div id="root">
       <button @click="update">修改</button>
      <ul>
          <li v-for="p in persons">
              {{p.name}}     {{p.age}}      {{p.sex}}
          </li>
      </ul>
  </div>


<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script>
Vue.config.productionTip = false

    const vm = new Vue({
        el:'#root',
       /*
       * 要注意的是如果data属性里面定义了数组的话，Vue是会为整个数组定义一组get/set,数组中的每个元素是不具备get/set方法的，
       * 所以对数组添加/删除的话是可以触发修改的，但是修改操作要注意不能直接用下标修改,因为使用下标修改操作的是数组的每一个元素进行操作
       * 而Vue没有为数组的每一个元素绑定get/set方法
       * 如果涉及对数组元素的增删改查最好使用数组的API进行操作
       *
       * */

        data:{
            persons:[
                {id:'001',name:'马冬梅',age:19,sex:'女'},
                {id:'002',name:'周冬雨',age:20,sex:'女'},
                {id:'003',name:'周杰伦',age:21,sex:'男'},
                {id:'004',name:'温兆伦',age:22,sex:'男'}
            ],

        },
        methods:{
            update(){
                //可以
                //this.persons =[...this.persons,{id:'005',name:'jack',sex: '男'}]
                //不可以
                // this.persons[0] ={id:'005',name:'jack',sex: '男'}
                //可以
                 this.persons.splice(3,1,{id:'005',name:'jack',sex: '男'});
            }
        }
    });


</script>
</body>
</html>